<template>
  <div>
    <van-grid :column-num="5">
      <van-grid-item
        v-for="value in list"
        :key="value.id"
        :icon="value.icon"
        :text="value.text"
      />
    </van-grid>
    <van-grid :column-num="5">
      <van-grid-item
        v-for="value in list"
        :key="value.id"
        :icon="value.icon"
        :text="value.text"
      />
    </van-grid>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
let list = reactive([
  {
    id: 1,
    icon: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
    text: "京东超市",
  },
  {
    icon: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
    text: "数码电器",
  },
  {
    icon: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
    text: "京东新百",
  },
  {
    icon: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg",
    text: "京东生鲜",
  },
  {
    icon: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg",
    text: "京东到家",
  },
]);
</script>

<style lang="scss" scoped>
div {
  width: 100%;
  display: flex;
  font-size: 14px;
  flex-wrap: wrap;
  span {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p {
      margin: 10px 2px 0px;
      padding: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      img {
        display: block;
        width: 30%;
      }
    }
  }
}
</style>
